<template>
  <div class="container">
    <div class="app">
      {{ msg  }}
    </div>
    <button @click="doubleCount" class="btn">
      你点击了加一按钮，当前数值：{{ count }}
    </button>
    <input v-model="val" placeholder="请输入内容" style="margin: 10px 0" />
    <button @click="addVal" class="btn">
      你点击了添加输入框数值按钮，当前数值：{{ count }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAppStore } from './store/index'

const val = ref(0)
const store = useAppStore()
const count = computed(() => store.count)
const msg =  ref('hello Vue3')

function doubleCount() {
  store.increment()
}

function addVal() {
  store.incrementValue(val.value)
}

</script>

<style scoped lang='less'>
.container{
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .app {
    width: 100px;
    height: 100px;
  }
  .app:hover{
    .hover-style();
  }
  .btn {
    background-color: #9c34ba;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
  }
  .btn:hover {
    background-color: #be84ce;
    cursor: pointer;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
  }
}
</style>
